---
import HeaderLink from "./HeaderLink.astro";
import Toaster from "@/components/ui/toast/Toaster.vue";
import { Image } from 'astro:assets';
---

<div class="grain"></div>
<header class="m-[0_0_2em]">
  <div class="flex flex-row justify-between items-center">
    <div class="flex flex-col">
    <h2 class="pb-1 flex items-center gap-3 m-[0.5em_0]">
      John Bakhmat
    </h2>
    <nav class="flex gap-3 flex-wrap">
      <HeaderLink href="/">Home</HeaderLink>
      <HeaderLink href="/blog/">Blog</HeaderLink>
      <HeaderLink href="/uses">Tools</HeaderLink>
      <HeaderLink href="/faq">FAQ</HeaderLink>
      <HeaderLink href="https://github.com/johnbakhmat" target="_blank"
        >GitHub</HeaderLink
      >
      <HeaderLink href="mailto:johnbakhmat@gmail.com">Email</HeaderLink>
    </nav>
    </div>
    <Image
      src="/images/johnbakhmat-1280x1280.webp",
      densities={[1.5,2]}
      alt="johnbakhmat's avatar"
      width={100}
      height={100}
      loading="eager"
      class=`rounded-xl m-0 font-bold border-themeAccent shadow-[0_0_50px_0_#71e79533]
border border-dashed aspect-square w-full max-w-100px 2xl:max-w-150px`
    />
  </div>
</header>
<Toaster client:idle/>
